<template>
	<div class="content">
		<cl-crud @load="onLoad">
			<template #slot-btn>
				<el-button
					type="danger"
					size="mini"
					@click="batchFiled(0)"
					:disabled="selectRow.length > 0 ? false : true"
					>批量隐藏</el-button
				>
				<el-button
					type="primary"
					size="mini"
					@click="batchFiled(1)"
					:disabled="selectRow.length > 0 ? false : true"
					>批量显示</el-button
				>
			</template>
			<template #slot-filter>
				<div class="filter-list">
					<div class="filter-item">
						<span class="filter-title">类型：</span>
						<el-select
							size="mini"
							filterable
							placeholder="请选择类型"
							style="width: 120px"
							v-model="selects.type"
							@change="val => refresh({ type: val, page: 1 })"
						>
							<el-option value label="全部"></el-option>
							<el-option label="商品" value="0"></el-option>
							<el-option label="链接" value="1"></el-option>
						</el-select>
					</div>
					<div class="filter-item">
						<span class="filter-title">状态：</span>
						<el-select
							class="filter-select"
							size="mini"
							filterable
							placeholder="请选择状态"
							style="width: 120px"
							v-model="selects.status"
							@change="val => refresh({ status: val, page: 1 })"
						>
							<el-option value label="全部"></el-option>
							<el-option label="隐藏" value="0"></el-option>
							<el-option label="显示" value="1"></el-option>
						</el-select>
					</div>
				</div>
			</template>

			<template #table-column-img="{ scope }">
				<div class="banner">
					<img :src="scope.row.img" />
				</div>
			</template>
			<template #table-column-status="{ scope }">
				<el-tag v-if="scope.row.status === 1">显示</el-tag>
				<el-tag type="info" v-if="scope.row.status === 0">隐藏</el-tag>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import feilListOne from '@/components/feilListOne';
export default {
	name: 'banner',
	data() {
		return {
			selects: {
				type: '',
				status: ''
			},
			selectRow: []
		};
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.setting.banner)
				.set('table', {
					columns: [
						{
							type: 'selection',
							label: '全选',
							align: 'center',
							width: '60px'
						},
						{
							label: '标题',
							prop: 'title',
							align: 'center'
						},
						{
							label: '图片',
							prop: 'img',
							align: 'center',
							width: 300
						},
						{
							label: '类型',
							prop: 'type',
							align: 'center',
							dict: [
								{
									label: '商品',
									value: 0
								},
								{
									label: '链接',
									value: 1
								}
							]
						},
						{
							label: '链接',
							prop: 'link',
							align: 'center'
						},
						{
							label: '排序',
							prop: 'level',
							align: 'center',
							sortable: true
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							sortable: true
						}
					],
					props: {
						'default-sort': {
							prop: 'level',
							order: 'descending'
						}
					},
					on: {
						'selection-change': selection => {
							this.selectRow = selection;
						}
					}
				})
				.set('upsert', {
					props: {
						title: '',
						width: '500px',
						labelWidth: '120px'
					},
					items: [
						{
							prop: 'title',
							label: '标题：',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请填写标题/备注',
									clearable: true
								}
							},
							rules: [
								{
									required: true,
									message: '标题不能为空'
								}
							]
						},
						{
							prop: 'type',
							label: '类型：',
							span: 16,
							component: {
								name: 'el-select',
								options: [
									{
										value: 0,
										label: '商品'
									},
									{
										value: 1,
										label: '链接'
									}
								],
								attrs: {
									placeholder: '请选择跳转类型',
									clearable: true
								}
							},
							rules: {
								required: true,
								message: '类型不能为空'
							}
						},
						{
							prop: 'img',
							label: 'banner图：',
							component: feilListOne,
							rules: {
								required: true,
								message: 'banner图不能为空'
							}
						},
						{
							prop: 'link',
							label: '跳转链接：',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请填写跳转链接或拼团ID',
									clearable: true
								}
							},
							rules: {
								required: true,
								message: '跳转链接不能为空'
							}
						},
						{
							prop: 'level',
							label: '排序：',
							value: 0,
							component: {
								name: 'el-input-number',
								attrs: {
									placeholder: '请输入排序',
									clearable: true
								}
							},
							rules: {
								required: true,
								message: '排序不能为空'
							}
						},
						{
							prop: 'status',
							label: '状态：',
							value: 1,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '显示',
										value: 1
									},
									{
										label: '隐藏',
										value: 0
									}
								]
							},
							rules: {
								required: true,
								message: '标识不能为空'
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'slot-btn', 'slot-filter', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('open', isEdit => {
					if (isEdit) {
						app.setData('upsert.props.title', '编辑banner');
					} else {
						app.setData('upsert.props.title', '新增banner');
					}

					// app.setData('upsert.items[prop:staffId].component.options', staff);
				})
				.on('refresh', async (params, { next, render }) => {
					const { list } = await next(params);
					// list.map(e => {
					// 	e.labelList = e.label ? e.label.split(',') : [];
					// });
					render(list);
				})
				.done();
			app.refresh();
		},
		refresh(params) {
			this.crud.refresh(params);
		},
		// 批量操作
		batchFiled(status) {
			let idsArr = [];
			this.selectRow.forEach(item => {
				idsArr.push(item.id);
			});

			this.$service.comm
				.batchFiled({
					repository: 'banner',
					status: status,
					ids: idsArr.join(',')
				})
				.then(() => {
					this.crud.refresh();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	.banner {
		width: 300px;
		height: 150px;
		img {
			width: 100%;
		}
	}
}
</style>
